<template>
  <md-popup v-model="show" position="bottom">
    <md-popup-title-bar only-close :title="$t('dao.update')" title-align="left" @cancel="show = false" />
    <div style="background: #fff; padding: 20px">
      <md-input-item v-model="form.name" :title="$t('dao.name')" align="right" />
      <md-input-item v-model.number="form.poundage" :title="$t('dao.poundage')" align="right">
        <template #right>
          %
        </template>
      </md-input-item>
      <md-field-item solid :title="$t('dao.open')">
        <template #right>
          <md-switch :modelValue="form.open == 'on'" @update:modelValue="data => form.open = data ? 'on' : 'off'" />
        </template>
      </md-field-item>
      <div style="padding-top: 25px">
        <md-button type="primary" :loading="loading" @click="action" round>{{ $t('confirm') }}</md-button>
      </div>
    </div>
  </md-popup>
</template>

<script setup>
import { ref } from 'vue'
import { toast } from '@/style'
import { t } from '@/lang'
import { packager, random } from '@/web3'
import { update } from '@/api/dao'

const emit = defineEmits(['update'])

const show = ref(false)
const loading = ref(false)
const list = ref([])
const form = ref({
  id: 0,
  name: '',
  open: '',
  poundage: 0
})

const open = (data) => {
  show.value = true
  form.value = data
}

const action = () => {
  // 打包数据
  loading.value = true
  update(form.value).then(res => {
    toast(t('ok'))
    show.value = false
    emit('update')
  }).catch(err => {
    toast(err.message)
  }).finally(() => {
    loading.value = false
  })
}

defineExpose({ open })

</script>